<template>
  <Layout style="padding:10px;background:#fff;">
    <Row>
      <Col span="24">
      <Card dis-hover :bordered="false" title="设备基本信息" icon="ios-options" :padding="0">
        <span slot="extra">
          <Button size="small" @click="handelEdit" v-if="!isEdit">编辑</Button>
          <Button :disabled="btnDisable" size="small" type="primary" v-if="isEdit" @click="handelSubmit">保存</Button>
        </span>
        <transition name="fade-transverse">
          <CellGroup v-if="!isEdit" style="width:40%;">
            <Cell title="所属企业：" :extra="thermalImagInfo.company" />
            <Cell title="所属区域：" :extra="thermalImagInfo.group" />
            <Cell title="设备类型：" :extra="thermalImagInfo.model" />
            <Cell title="网络类型：" :extra="thermalImagInfo.network" />
            <Cell title="云台设备：" :extra="thermalImagInfo.havPTZ?'有':'无'" />
            <Cell title="设备名称：" :extra="thermalImagInfo.name" />
            <Cell title="设备别名：" :extra="thermalImagInfo.alias" />
            <Cell title="设备厂商：" :extra="thermalImagInfo.vendor" />
            <Cell title="通道地址：" :extra="thermalImagInfo.channelIp" />
            <Cell title="端口：" :extra="thermalImagInfo.httpPort" />
            <Cell title="设备位置：" :extra="thermalImagInfo.location" />
            <Cell title="设备编号：" :extra="thermalImagInfo.deviceNo" />
            <Cell title="通讯协议：" :extra="thermalImagInfo.protocol" />
            <Cell title="是否启用：" :extra="thermalImagInfo.enable?'是':'否'" />
          </CellGroup>
        </transition>
        <transition name="fade-transverse">
          <div v-if="isEdit" style="padding-top:5px;">
            <addVideoDeviceDialogForm ref="refEdit" :row="row" :isEdit="true" @edit="finishSave" />
          </div>
        </transition>
      </Card>
      </Col>
    </Row>
  </Layout>
</template>
<script>
import { getDisk } from "@/api"
import addVideoDeviceDialogForm from "../../components/addVideoDeviceDialogForm"
export default {
  components: {
    addVideoDeviceDialogForm
  },
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    id() {
      this.getThermalImagInfo()
    }
  },
  data() {
    return {
      thermalImagInfo: {},
      isEdit: false,
      row: {},
      btnDisable: false
    }
  },
  mounted() {
    this.getThermalImagInfo()
  },
  methods: {
    getThermalImagInfo() {
      const { id } = this
      if (id) {
        const params = { id }
        getDisk({ params }).then(res => {
          if (res.code === 200) {
            try {
              this.thermalImagInfo = res.data.list[0]
            } catch (error) {}
          }
        })
      }
    },
    handelEdit() {
      this.row = this.thermalImagInfo
      this.isEdit = true
    },

    handelSubmit() {
      this.btnDisable = true
      this.$refs.refEdit.submit()
    },

    finishSave() {
      this.btnDisable = false
      this.isEdit = false
    }
  }
}
</script>
